<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文章详情</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" type="text/css" th:href="@{/css/nprogress.css}">
<link rel="stylesheet" type="text/css" th:href="@{/css/style.css}">
<link rel="stylesheet" type="text/css" th:href="@{/css/font-awesome.min.css}">
<link rel="apple-touch-icon-precomposed" th:href="@{/images/icon.png}">
	<link rel="stylesheet" type="text/css" th:href="@{/js/layui/css/layui.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/js/layui/css/layui.css}"/>
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
<script th:src="@{/js/jquery-2.1.4.min.js}"></script>
<script th:src="@{/js/nprogress.js}"></script>
<script th:src="@{/js/jquery.lazyload.min.js}"></script>
	<script th:src="@{/js/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
<!--[if gte IE 9]>
<script th:src="@{/js/jquery-1.11.1.min.js}" type="text/javascript"></script>
<script th:src="@{/js/html5shiv.min.js}" type="text/javascript"></script>
<script th:src="@{/js/respond.min.js}" type="text/javascript"></script>
<script th:src="@{/js/selectivizr-min.js}" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 9]>
<script>window.location.href='upgrade-browser.html';</script>
<![endif]-->
</head>
<body class="user-select single">
<header class="header">
<nav class="navbar navbar-default" id="navbar">
<div class="container">
  <div class="header-topbar hidden-xs link-border">
	<ul class="site-nav topmenu">
	  <li><a href="#" >标签云</a></li>
		<li><a href="#" rel="nofollow" >读者墙</a></li>
		<li><a href="#" title="RSS订阅" >
			<i class="fa fa-rss">
			</i> RSS订阅
		</a></li>
	</ul>
	勤记录 懂分享</div>
  <div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar" aria-expanded="false"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
	<h1 class="logo hvr-bounce-in"><a href="/" title="宾果网络博客"><img th:src="@{/images/201610171329086541.png}" alt="宾果网络博客"></a></h1>
  </div>
  <div class="collapse navbar-collapse" id="header-navbar">
	<form class="navbar-form visible-xs" action="/Search" method="post">
	  <div class="input-group">
		<input type="text" name="keyword" class="form-control" placeholder="请输入关键字" maxlength="20" autocomplete="off">
		<span class="input-group-btn">
		<button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
		</span> </div>
	</form>
	<ul class="nav navbar-nav navbar-right">
		<li><a data-cont="宾果个人博客" title="宾果个人博客" href="/">首页</a></li>
		<li><a data-cont="springboot" title="springboot" href="#" >springboot</a></li>
		<li><a data-cont="springcloud" title="springcloud" href="#" >springcloud</a></li>
		<li><a data-cont="资讯分享" title="资讯分享" href="#" >资讯分享</a></li>
	</ul>
  </div>
</div>
</nav>
</header>
<section class="container">
<div class="content-wrap">
<div class="content">
  <header class="article-header">
	<h1 class="article-title"><a href="#" th:text="${webArticle.artTitle}"></a></h1>
	<div class="article-meta"> <span class="item article-meta-time">
	  <time class="time" data-toggle="tooltip" data-placement="bottom" title="" th:attr="data-original-title = '发表时间：'+${#dates.format(webArticle.createTime,'yyyy-MM-dd')}" data-original-title="2016-10-14"><i class="glyphicon glyphicon-time"></i><span th:text="${#dates.format(webArticle.createTime,'yyyy-MM-dd')}"></span></time>
	  </span> <span class="item article-meta-source" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="来源：宾果网络博客"><i class="glyphicon glyphicon-globe"></i> 宾果网络博客</span>
		<span class="item article-meta-views" data-toggle="tooltip" data-placement="bottom" title="" th:attr="data-original-title = '浏览量：'+${webArticle.artReadCount}" ><i class="glyphicon glyphicon-eye-open"></i> <span th:text="${webArticle.artReadCount}"></span></span>
		<span class="item article-meta-comment" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="评论量"><i class="glyphicon glyphicon-comment"></i> 4</span> </div>
  </header>
	<input type="hidden" id="content" th:value="${webArticle.content}">
	<input type="hidden" id="id" th:value="${webArticle.id}">
  <article class="article-content" id="art">

  </article>
  <div class="article-tags">标签：<a href="#list/2/" rel="tag" >DTcms博客</a><a href="#list/3/" rel="tag" >宾果网络博客</a><a href="#list/4/" rel="tag" >独立博客</a><a href="#list/5/" rel="tag" >修复优化</a>
	</div>
  <div class="relates">
	<div class="title">
	  <h3>相关推荐</h3>
	</div>
	<ul>
	  <li th:each="art,stat:${arts}"><a th:href="@{'/show/'+${art.id}}" th:text="${art.artTitle}" th:title="${art.artTitle}" ></a></li>
	</ul>
  </div>
  <div class="title" id="comment">
	<h3>评论</h3>
  </div>
  <div id="respond">
		<form id="comment-form"  class="layui-form">
			<div class="comment">
				<input name="nickName" id="nickName" class="form-control" required size="22" lay-verify="required"  placeholder="您的昵称（必填）" maxlength="15" autocomplete="off" tabindex="1" type="text">
				<input name="email" id="email" class="layui-input"  size="22" placeholder="您的网址或邮箱（非必填）" maxlength="58" autocomplete="off" tabindex="2" type="text">
				<div class="comment-box">
					<textarea placeholder="您的评论或留言（必填）" lay-verify="required" required name="content" id="artComment" class="layui-textarea" cols="100%" rows="3" tabindex="3"></textarea>
					<div class="comment-ctrl">
						<button type="button" name="comment-submit" id="comment-submit" tabindex="4" onclick="dataSubmit()">评论</button>
					</div>
				</div>
			</div>
		</form>
		
	</div>
  <div id="postcomments">
	<ol id="comment_list" class="commentlist">
	</ol>
  </div>
</div>
</div>
<aside class="sidebar">
	<div th:replace="right::right"></div>
  <div class="widget widget_sentence">
		<a href="#" target="_blank" rel="nofollow" title="MZ-NetBlog主题" ></a>
  </div>
  <div class="widget widget_sentence">
	  <a href="#" target="_blank" rel="nofollow" title="专业网站建设" ></a>
  </div>
</aside>
</section>
<footer class="footer">
<div class="container">
 <p>Copyright &copy; 2016.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a> </p>
</div>
<div id="gotop"><a class="gotop"></a></div>
</footer>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/jquery.ias.js}"></script>
<script th:src="@{/js/scripts.js}"></script>
<script th:src="@{/js/dateutil.js}"></script>
<script>
    layui.use(['code','layer'] ,function(){
        var layer = layui.layer;
        layui.code({
            elem: 'pre',
            about: false
		});
    });

    $(function () {
        var showContent=$("#content").val();
        decodeHtml(showContent);
        $("#art").append(showContent);
        dataAct();

        $.ajax({
            url: '/hotCommentAct',
            type: 'post',
            dataType: 'json',
            success: function (data) {
                if (data.code === 200) {
                    var msg = data.data;
                    var html = '';
                    for(var i = 0;i < msg.length ;i++) {
                        html+='<li><a title='+msg[i].artTitle+' href=/show/'+msg[i].id+' style="padding: 10px;"><span class="thumbnail"></span>';
                        html+='<span class="text">'+msg[i].artTitle+'</span>';
                        html+='<span class="muted"><i class="glyphicon glyphicon-time"></i>'+getFormatDateByLong(msg[i].createTime,'yyyy-MM-dd')+'</span>';
                        html+='<span class="muted"><i class="glyphicon glyphicon-eye-open"></i>'+msg[i].artReadCount+'</span></a></li>';
                    }
                    $('#commentAct').append(html);
                } else {
                    layer.msg('获取数据失败，请联系管理员 qq:425089032');
                }


            }
        });

    });

    function dataSubmit() {
        var nickName = $('#nickName').val();
        var content = $('#artComment').val();
        if(nickName == '' || content == ''){
            layer.msg('请填写内容');
            return false;
		}
		var data ={
            nickName:nickName,
            email:$('#email').val(),
            content:content,
            actId:$('#id').val()
		}
        $.ajax({
            url: '/addComment',
            data: data,
            type: 'post',
            dataType: 'json',
            success: function (data) {
                if (data.code === 200) {
                    layer.msg('回复成功');
                    //清空表单
                    $('#nickName').val('');
                    $('#email').val('');
                    $('#artComment').val('');
                    $('#comment_list').html('');
                    dataAct();
                } else {
                    layer.msg('添加失败，请刷新页面');
                }


            }
        });
		return false;
    }

    function dataAct() {
        $.ajax({
            url: '/comments?actId='+$('#id').val(),
            type: 'post',
            dataType: 'json',
            success: function (data) {
                var msg = data.data;
                var html = '';
                for(var i = 0;i < msg.length ;i++) {
                    html+='<li class="comment-content"><span class="comment-f">#'+msg.length+'</span>';
                    html+='<div class="comment-main"><p>';
                    html+='<a class="address" href="#" rel="nofollow" target="_blank">'+msg[i].nickName+'</a>';
                    html+='<span class="time">'+getFormatDateByLong(msg[i].createTime,'yyyy-MM-dd hh:mm:ss')+'</span>';
                    html+='<br>'+msg[i].content+'</p></div></li>';
                }
                $('#comment_list').append(html);
            }
        });
    }

    function decodeHtml(s) {
        var HTML_DECODE = {
            "&lt;": "<",
            "&gt;": ">",
            "&amp;": "&",
            "&nbsp;": " ",
            "&quot;": "\"",
            "&copy;": ""
        };
        var REGX_HTML_ENCODE = /"|&|'|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g;
        var REGX_HTML_DECODE = /&\w+;|&#(\d+);/g;
        var REGX_TRIM = /(^\s*)|(\s*$)/g;
        s = (s != undefined) ? s : "";
        return (typeof s != "string") ? s :
            s.replace(REGX_HTML_DECODE,
                function ($0, $1) {
                    var c = HTML_DECODE[$0];
                    if (c == undefined) {
                        if (!isNaN($1)) {
                            c = String.fromCharCode(($1 == 160) ? 32 : $1);
                        } else {
                            c = $0;
                        }
                    }
                    return c;
                });
    };
</script>
</body>
</html>
